<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
                    <el-form-item label="岗位名称" prop="name">
                        <el-input v-model="queryParams.name" placeholder="请输入" clearable style="width: 240px" maxlength="30"
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item style="margin-left: 40px;">
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>

                <el-table v-loading="loading" :data="detectionList"
                    style="margin-top: 30px;margin-left: 20px;margin-right: 20px;width: calc(100% - 40px);">
                    <el-table-column type="index" width="50" label="序号" />
                    <el-table-column label="岗位编码" align="center" prop="code" />
                    <el-table-column label="岗位名称" align="center" prop="name" />
                    <el-table-column label="类型" align="center" prop="isPrimary">
                        <template #default="scope">
                            {{ GetDictObjForValue(jobPost, scope.row.isPrimary).text }}
                        </template>
                    </el-table-column>
                    <el-table-column label="岗位排序" align="center" prop="sortNo" />
                    <el-table-column label="备注" align="center" prop="remark" />
                    <el-table-column label="创建时间" align="center" prop="createTime" />
                    <el-table-column label="操作" fixed="right" align="center" width="150"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getList" style="margin-right: 20px;" />
            </el-col>
        </el-row>

        <!-- 添加 -->
        <el-dialog v-model="open" width="600px" append-to-body :title="!form.id ? '新增' : '编辑'">
            <div v-loading="dialogloading">
                <el-form :model="form" :rules="rules" ref="userRef" label-width="120px">
                    <el-form-item label="岗位名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入" style="width: 400px" maxlength='11' />
                    </el-form-item>
                    <el-form-item label="职位编码" prop="code">
                        <el-input v-model="form.code" placeholder="请输入" style="width: 400px" maxlength='11' />
                    </el-form-item>
                    <el-form-item label="岗位排序" prop="sortNo">
                        <el-input v-model="form.sortNo" placeholder="请输入" style="width: 400px" maxlength='11' />
                    </el-form-item>
                    <el-form-item label="任职类型" prop="isPrimary">
                        <el-select v-model="form.isPrimary" placeholder="请选择" clearable style="width: 400px">
                            <el-option v-for="(item, idx) in jobPost" :key="idx" :label="item.text" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input v-model="form.note" placeholder="请输入" :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea" style="width: 400px" maxlength='200' show-word-limit />
                    </el-form-item>
                </el-form>
                <div class="dialog-footer">
                    <el-button type="primary" @click="saveForm">{{ form.id ? '编辑' : "新增" }}</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
 
<script setup>
import { apiGetPostList, apiAddPost, apiEditPost, apiDelPost } from "@/api/organization";
import { JobPostType, GetDictObjForValue } from "@/utils/dict";

const { proxy } = getCurrentInstance();

const jobPost = ref(JobPostType)
const detectionList = ref([]);
const loading = ref(false);
const open = ref(false);
const dialogloading = ref(false);
const total = ref(0);

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
    },
    rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        code: [{ required: true, message: "请输入", trigger: "blur" }],
        sortNo: [{ required: true, message: "请输入", trigger: "blur" }],
        isPrimary: [{ required: true, message: "请选择", trigger: "change" }],
    },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询列表 */
const getList = () => {
    loading.value = true;
    apiGetPostList(queryParams.value).then(res => {
        loading.value = false;
        console.log(res)
        if (res.data) {
            detectionList.value = res.data.records;
            total.value = res.data.total;
        } else {
            detectionList.value = []
            total.value = 0
        }
    }).catch(err => {
        loading.value = false
        detectionList.value = []
        total.value = 0
    });
};

getList();

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
};


/** 重置操作表单 */
function reset() {
    form.value = {
        userName: undefined,
        entName: undefined,
        kin: undefined,
        phonenumber: undefined,
        dateRange: []
    };
    proxy.resetForm("userRef");
};
/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
};
/** 新增按钮操作 */
const handleAdd = () => {
    reset();
    form.value = {}
    open.value = true;
};

const handleEdit = (row) => {
    reset();
    form.value = row
    open.value = true;
}

const saveForm = () => {
    proxy.$refs["userRef"].validate(valid => {
        if (valid) {
            dialogloading.value = true;
            if (form.value.id) {
                apiEditPost(form.value).then(res => {
                    dialogloading.value = false;
                    proxy.$modal.msgSuccess("操作成功");
                    open.value = false;
                    getList()
                }).catch(err => {
                    dialogloading.value = false
                });
            } else {
                apiAddPost(form.value).then(res => {
                    dialogloading.value = false;
                    proxy.$modal.msgSuccess("操作成功");
                    open.value = false;
                    getList()
                }).catch(err => {
                    dialogloading.value = false
                });
            }
        }
    });
}

const handleDelete = (row) => {
    proxy.$modal.confirm('是否确认删除该数据项？').then(() => {
        return apiDelPost(row.id)
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

</script>
 

<style lang="scss" scoped>
.dialog-item-title {
    color: #000;
    font-size: 17px;
    padding-left: 10px;
    margin: 0 20px;
    border-left: 4px #00BFFF solid;
}

.now-select-txt {
    font-size: 15px;
    color: #fff;
    background: #00BFFF;
    padding: 10px 20px;
    border-radius: 10px 10px 0 0;

    span {
        font-size: 20px;
        font-weight: bold;
        margin: 0 10px;
    }

    div {
        cursor: pointer;
        margin-left: 30px;
        font-weight: bold;
    }
}
</style>